<template>
  <!-- 顶部 -->
  <div id="studentHeader">
    <div class="home" @click="skipHome()">
      <span class="iconfont icon-shouye1"></span>
    </div>
    <div id="person-msg">
      <span
        class="iconfont icon-tidings"
        :style="[{'color': iconColor ? 'red' : 'rgb(83, 83, 83)'}]"
        @mouseover="showDialog=true"
        @mouseleave="showDialog=false"
      ></span>
    </div>
    <!-- 下拉框 -->
    <div class="dialog" v-show="showDialog" @mouseover="enterdailog" @mouseleave="showDialog=false">
      <div @click="skipCheckWriteRecord()">点赞/评论</div>
      <br />
      <div
        @click="skipStayWriteTable()"
        :style="[{'color': iconColor ? 'red' : 'rgb(83, 83, 83)'}]"
      >待填写 &nbsp; {{ConstraintSize}}</div>
    </div>
    <!-- 下拉框end -->
  </div>
  <!-- 顶部end -->
</template>
<script>
export default {
  data() {
    return {
      showDialog: false,
      iconColor: true,
      ConstraintSize: ""
    };
  },
  created() {
    this.selectFilledTableList();
  },
  methods: {
    // 查看收集表列表
    selectFilledTableList() {
      this.$get(this.$urlPath.collection + "/collection/selfConstraint/")
        .then(resp => {
          if (resp.code == 200) {
            this.ConstraintSize = resp.data.length;
            if (this.ConstraintSize > 0) {
              this.iconColor = !iconColor;
            } else {
              this.iconColor = false;
            }
          }
          console.log("++++++++++++++++++++");
          console.log(this.ConstraintSize);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查看收集表列表end
    enterdailog() {
      this.showDialog = true;
    },
    // 跳转主页
    skipHome() {
      this.$router.push({ path: "/index" });
    },
    // 跳转待填写页面
    skipStayWriteTable() {
      this.$router.push({ path: "/stayWriteTable" });
    },
    // 跳转查看学生填写记录页面
    skipCheckWriteRecord() {
      this.$router.push({ path: "/checkWriteRecord" });
    }
  }
};
</script>
<style lang="less">
@import "../assets/less/top.less";
</style>